﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <title>康陆网保健品商城的一简单的图片轮播效果</title>
    <meta name="description" content="!" />
    <meta name="keywords" content="" />
    <style type="text/css">
html,body,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p,pre,form,fieldset,legend,input,img{margin:0;padding:0;}
ul,li,ol{list-style:none;}
img{vertical-align:bottom;border:0;}
body{background:#fff;font-size:12px;font-family:Helvetica,Arial,sans-serif;}
a{text-decoration:none;color:#000;}
a:hover{text-decoration:underline;}

.ztShow{width:230px;height:230px;margin:50px auto;position:relative;background:#fff url(http://webtms.googlecode.com/svn/trunk/imgsrc/2010-3-16/ztshowbg.png) left center no-repeat;}
.ztShow h4{height:25px;line-height:25px;position:relative;font-size:14px;text-indent:0.5em;}
.ztShow h4 a{position:absolute;right:0.5em;top:0px;color:#999999;font-size:12px;}

.ztShow .ztImgBox{width:182px;height:189px;margin:5px 0 0 0.5em;padding:2px;overflow:hidden;border:1px solid #E1E1E1;}
.ztShow .ztImgBox ul{width:182px;height:189px;overflow:hidden;}
.ztShow .ztImgBox ul li{width:182px;height:189px;overflow:hidden;}
.ztShow .ztImgBox ul img{width:182px;height:189px;}
.ztShow p.tabs{position:absolute;right:10px;top:30px;}
.ztShow p.tabs a{display:block;width:17px;height:21px;line-height:21px;margin-bottom:8px;text-indent:6px;background:url(http://webtms.googlecode.com/svn/trunk/imgsrc/2010-3-16/zttabs.gif) right top no-repeat;}
.ztShow p.tabs #tabsOn{background:url(http://webtms.googlecode.com/svn/trunk/imgsrc/2010-3-16/zttabs.gif) left top no-repeat;color:#fff;}

dl{width:270px;margin:30px auto;font-size:14px;line-height:25px;}
</style>
<script type="text/javascript">
var ztShow=function(boxId,boxHeight,tabsId,tabsOn,times){

var getNodeList=function(nodeList){//获取标签下结点数
var New=[];var n=0;
for (var i=0;i<nodeList.length;++i ){if(nodeList[i].nodeType==1){n++;New.push(nodeList[i]);nodeList[i].setAttribute("num",n);}}
return New;
}

var $=function(id){return document.getElementById(id);}//定义ID查询器；
if($(tabsId).nodeType==1){var as=getNodeList($(tabsId).childNodes);}
var imgs=getNodeList($(boxId).childNodes);//取得轮换图片数组;
var tabsKey=true;//定义定时轮换KEY开关；
var tabsNum=0;//定义当前轮换数组位置坐标数；

if($(tabsId).nodeType==1){
for(var i=0;i<as.length;i++){
	as[i].onmouseover=function(){
		tabsKey=false;
		imgs[0].style.marginTop="-" + ((this.attributes["num"].nodeValue-1)*189) + "px";
		$("tabsOn").id="";this.id="tabsOn";
	}
	as[i].onmouseout=function(){
		tabsKey=true;
		tabsNum=this.attributes["num"].nodeValue-1;
	}
}
}

for(var i=0;i<imgs.length;i++){imgs[i].onmouseover=function(){tabsKey=false;}
	imgs[i].onmouseout=function(){tabsKey=true;}
}
if(times!=0){
this.setInterval(function(){
	if(tabsKey){
		if($(tabsId).nodeType==1){$(tabsOn).id="";as[tabsNum].id=tabsOn};
		imgs[0].style.marginTop="-" + ((tabsNum )*boxHeight) + "px";
		tabsNum++;
		if(tabsNum==imgs.length){tabsNum=0;}
	}
},times);
}
}
window.onload=function(){
ztShow("ztImgBox",189,"tabs","tabsOn",2000);
}
</script>
</head>
<body>
<div class="ztShow">
	<h4>康陆网品牌大赏<a href="" target="_blank">更多</a></h4>
	<div class="ztImgBox">
		<ul id="ztImgBox">
			<li><a href="" target="_blank"><img src="http://img.k6.cn/UploadFiles/drumbeating/633888868284843750.jpg" alt="" /></a></li>
			<li><a href="" target="_blank"><img src="http://img.k6.cn/UploadFiles/drumbeating/633888868842343750.jpg" alt="" /></a></li>
			<li><a href="" target="_blank"><img src="http://img.k6.cn/UploadFiles/drumbeating/634031333460625000.jpg" alt="" /></a></li>
			<li><a href="" target="_blank"><img src="http://img.k6.cn/UploadFiles/drumbeating/634031335354218750.jpg" alt="" /></a></li>
			<li><a href="" target="_blank"><img src="http://img.k6.cn/UploadFiles/drumbeating/634031335530312500.jpg" alt="" /></a></li>
			<li><a href="" target="_blank"><img src="http://img.k6.cn/UploadFiles/drumbeating/634031335912812500.jpg" alt="" /></a></li>
			<li><a href="" target="_blank"><img src="http://img.k6.cn/UploadFiles/drumbeating/634031350602187500.jpg" alt="" /></a></li>
		</ul>
	</div>
			<p class="tabs" id="tabs">
			<a id="tabsOn" href="#zttabs">1</a> 
			<a href="#zttabs">2</a> 
			<a href="#zttabs">3</a> 
			<a href="#zttabs">4</a> 
			<a href="#zttabs">5</a> 
			<a href="#zttabs">6</a> 
			<a href="#zttabs">7</a> 
		</p>
</div>
<dl>
	<dt>版块名称：图片切换</dt>
	<dd>栅格系统:950px;24X40栅格模式；</dd>
	<dd>版块规格:4X40=240-10=230；单位:px(像素)</dd>
</dl>
</body>
</html>
